<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="stomp.js"></script>
    <script src="sockjs.js"></script>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
频道号：<input type="text" id="room">
账号： <input type="text" id="sd">
密码： <input type="password" id="password">
<button onclick="conectWebSocket()">连接Websocket</button>
<button onclick="disconnect()">断开连接</button>
<hr />
<div id="message22"></div>
<br />
做题区：<input type="text" id="abc">
<button onclick="sendMessage()">发送消息</button>
<button onclick="sendAll()">发送全体</button>
<button onclick="sendtoAll()">发送全体2</button>
<div id="message"></div>


<script>
    var ws=null;
    var name=null;
    console.log(document.getElementById("sd"));
    console.log("name: "+name);
    var stompClient=null;
    var serverUrl="http://localhost:8099/websocket";
    var room;//频道号
    function conectWebSocket() {
        room=document.getElementById('room').value;
        console.log(room);

        ws=new SockJS(serverUrl);
        stompClient=Stomp.over(ws);

        stompClient.connect({
            username:document.getElementById("sd").value,
            password:md5(document.getElementById("password").value)
        },function (frame) {
            stompClient.subscribe('/topic/'+room,function (txt) {
                console.log(txt);
                document.getElementById("message").innerHTML+=txt.body+'<br />';

                // if (message.body){
                //     var sender =JSON.parse(message.body)['sender'];
                //     var language =JSON.parse(message.body)['language'];
                //     var content =JSON.parse(message.body)['content'];
                //     var type =JSON.parse(message.body)['type'];
                // }
            });
            stompClient.subscribe('/all',function (txt) {
                console.log(txt);
                document.getElementById("message").innerHTML += txt.body + '<br />';
            })
        })
    }
    function sendMessage() {
        var message=document.getElementById("abc").value;
        // var message="哈哈哈"
        var socketMsg={
            msg:message,
            toUser:room
        }
        stompClient.send('/app/chat',{},JSON.stringify({
            'name':document.getElementById("sd").value,
            'room':room,
            'type':"1",
            'content':message,
            'userId':'56601234',
            'questionId':'1+1=?',
            'createTime':""
        }))
    }
    function sendAll() {
        var message=document.getElementById("abc").value;
        // var message="哈哈哈"
        var socketMsg={
            msg:message,
            toUser:room
        }
        stompClient.send('/app/chatAll',{},JSON.stringify({
            'name':document.getElementById("sd").value,
            'room':room,
            'type':"1",
            'content':message,
            'userId':'56601234',
            'questionId':'1+1=?',
            'createTime':""
        }))
    }
    function getUserAllQuestions() {
        axios({
            method:"get",
            url:"http://localhost:8099/getSelfQuestions"
        }).then(function (res) {
            // document.getElementById("message22").innerHTML += res.data+'<br />';
            console.log(res);
        })

    }
    function disconnect() {
        stompClient.disconnect();
        stompClient=undefined;

    }
    window.onload=function (ev) {
        getUserAllQuestions();
    }
    function sendtoAll() {
        var message=document.getElementById("abc").value;
        // var message="哈哈哈"
        var socketMsg={
            msg:message,
            toUser:room
        }
        stompClient.send('/app/all',{
            aa:'bb',
            time:new Date().getTime()
        },JSON.stringify({
            'name':document.getElementById("sd").value,
            'room':room,
            'type':"1",
            'content':message,
            'userId':'56601234',
            'questionId':'1+1=?',
            'createTime':""
        }))
    }
</script>
</body>
</html>